<template>
  <el-drawer v-model="drawer" :with-header="false" :size="size" :append-to-body="true" @close="close" :modal="true"
             modal-class="staff-modal" class="staff-detail-drawer">
    <div class="staff-detail">
      <div class="staff-header">
        <el-row justify="center">
          <el-col :span="6" :sm="8">
            <el-row justify="end" style="margin-right:20px">
              <el-avatar :size="60" :src="staffFormData.avatar" style="align-self:center;"/>
              <div class="row-item">
                <div class="row-cell">
                  <span class="staff-name">{{ staffFormData.name }}</span>
                  <i class="fa fa-venus pink" v-if="staffFormData.sex == 1"></i>
                  <i class="fa fa-mars blue" v-else></i>
                  <el-divider direction="vertical"/>
                  <span>{{ checkVal(staffFormData.age) }} 岁</span>
                </div>
                <el-row align="middle" style="font-size:13px;margin-top:5px;">
                  <span>{{ checkVal(staffFormData.officePosition, 'name') }}</span>
                  <el-divider direction="vertical"/>
                  <template v-for="item in staffTypes" :key="item.value">
                    <span v-if="item.value == staffFormData.type">{{ item.name }}</span>
                  </template>
                  <span v-if="staffTypes == null || staffTypes.length == 0">--</span>
                  <el-divider direction="vertical"/>
                  <template v-for="item in staffStates" :key="item.value">
                    <span v-if="item.value == staffFormData.state">{{ item.name }}</span>
                  </template>
                  <span v-if="staffStates == null || staffStates.length == 0">--</span>
                  <el-divider direction="vertical"/>
                  <span>兼任 {{ checkVal(staffFormData.deputyOfficePosition, 'name') }}</span>
                </el-row>
                <el-row align="middle" style="margin-top:8px">
                  <div class="row-other">
                    <el-icon color="var(--next-color-text-gery)" style="margin-right:5px">
                      <ele-Cellphone/>
                    </el-icon>
                    <span>{{ checkVal(staffFormData.phone) }}</span>
                  </div>
                  <el-divider direction="vertical"/>
                  <div class="row-other">
                    <i class="fa fa-envelope" style="color:var(--next-color-text-gery);margin-right:5px;"></i>
                    <span>{{ checkVal(staffFormData.email) }}</span>
                  </div>
                </el-row>
              </div>
            </el-row>
          </el-col>
          <el-col :span="5">
            <div class="staff-header-cell">
              <el-row align="middle">
                <div class="row-header-cell">
                  <span class="row-tips">部门</span>
                  <span class="row-data">{{ checkVal(checkVal(staffFormData.dept).name) }}</span>
                </div>
                <div class="row-header-cell">
                  <span class="row-tips">工号</span>
                  <span class="row-data">{{ checkVal(staffFormData.workNo) }}</span>
                </div>
                <div class="row-header-cell">
                  <span class="row-tips">职务</span>
                  <span class="row-data">{{ checkVal(staffFormData.officePost, 'name') }}</span>
                </div>
                <div class="row-header-cell">
                  <span class="row-tips">职级</span>
                  <span class="row-data">{{ checkVal(staffFormData.officePosition ? staffFormData.officePosition['officeGrade'] : '', 'name') }}</span>
                </div>
                <div class="row-header-cell">
                  <span class="row-tips">职等</span>
                  <span class="row-data">{{ checkVal(staffFormData.officePosition ? staffFormData.officePosition['officeGrade'] : '', 'grade') }}</span>
                </div>
                <div class="row-header-cell">
                  <span class="row-tips">直属上级</span>
                  <span class="row-data">{{ checkVal(staffFormData.directSuperiorName) }}</span>
                </div>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6" :sm="8">
            <div class="staff-header-cell">
              <el-row align="middle">
                <div class="row-header-cell">
                  <span class="row-tips">合同公司</span>
                  <span class="row-data">{{ checkVal(staffFormData.staffContract, 'companyName') }}</span>
                </div>
                <div class="row-header-cell">
                  <span class="row-tips">工作城市</span>
                  <span class="row-data">{{ checkVal(staffFormData.workLocation) }}</span>
                </div>
                <div class="row-header-cell">
                  <span class="row-tips">入职地点</span>
                  <span class="row-data">{{ checkVal(staffFormData.joinedAddress) }}</span>
                </div>
                <div class="row-header-cell" v-if="staffFormData.state == 1">
                  <span class="row-tips">试用期</span>
                  <template v-for="item in dictMap['StaffTrialLimit']" :key="item.value">
                    <span class="row-data" v-if="item.value == staffFormData.trialDay">{{ item.name }}</span>
                  </template>
                  <template v-if="!staffFormData.trialDay">-</template>
                </div>
                <div class="row-header-cell">
                  <span class="row-tips">入职日期</span>
                  <span class="row-data">{{ checkVal(staffFormData.joinedDate) }}</span>
                </div>
                <div class="row-header-cell" v-if="staffFormData.state == 1">
                  <span class="row-tips">计划转正日期</span>
                  <span class="row-data">{{ checkVal(staffFormData.officialDate) }}</span>
                </div>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <div class="staff-edit">
          <el-icon>
            <ele-Edit/>
          </el-icon>
        </div>
      </div>
      <el-row style="margin-top:15px" class="staff-content">
        <el-col :span="6">
          <el-card :body-style="{padding: `10px`}" style="margin-right:10px;height: 100%;">
            <el-collapse model-value="1">
              <el-collapse-item name="1">
                <template #title>
                  <h4 class="skill-title">工作技能标签</h4>
                </template>
                <div class="action-cell">
                  <span class="action-tips">入职</span>
                  <el-row>
                    <el-tag v-for="item in 10" :key="item" style="margin-top:10px;margin-right:10px;" size="small">Tags
                      {{ item }}
                    </el-tag>
                  </el-row>
                  <el-divider border-style="dotted" style="margin: 10px 0"/>
                </div>
                <div class="action-cell">
                  <span class="action-tips">薪酬</span>
                  <el-row>
                    <el-tag v-for="item in 2" :key="item" style="margin-top:10px;margin-right:10px;" size="small">Tags
                      {{ item }}
                    </el-tag>
                  </el-row>
                  <el-divider border-style="dotted" style="margin: 10px 0"/>
                </div>
                <div class="action-cell">
                  <span class="action-tips">考勤</span>
                  <el-row>
                    <el-tag v-for="item in 8" :key="item" style="margin-top:10px;margin-right:10px;" size="small">Tags
                      {{ item }}
                    </el-tag>
                  </el-row>
                  <el-divider border-style="dotted" style="margin: 10px 0"/>
                </div>
                <div class="action-cell">
                  <span class="action-tips">调动</span>
                  <el-row>
                    <el-tag v-for="item in 4" :key="item" style="margin-top:10px;margin-right:10px;" size="small">Tags
                      {{ item }}
                    </el-tag>
                  </el-row>
                  <el-divider border-style="dotted" style="margin: 10px 0"/>
                </div>
                <div class="action-cell">
                  <span class="action-tips">奖惩</span>
                  <el-row>
                    <el-tag v-for="item in 2" :key="item" style="margin-top:10px;margin-right:10px;" size="small">Tags
                      {{ item }}
                    </el-tag>
                  </el-row>
                  <el-divider border-style="dotted" style="margin: 10px 0"/>
                </div>
                <div class="action-cell">
                  <span class="action-tips">离职</span>
                  <el-row>
                    <el-tag v-for="item in 2" :key="item" style="margin-top:10px;margin-right:10px;" size="small">Tags
                      {{ item }}
                    </el-tag>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
            <h4 class="skill-title" style="margin-top:15px">其他信息</h4>
            <el-row style="margin-left:10px;">
              <el-col :span="12" style="margin-top:10px">
                <h5 class="other-msg-title">出勤情况</h5>
                <div class="other-container">
                  <el-row>
                    <span>过往3个月共迟到一个月</span>
                  </el-row>
                  <el-row>
                    <span>加班 <el-link :underline="false" type="primary">--</el-link> 小时</span>
                  </el-row>
                  <el-row>
                    <span>请假 <el-link :underline="false" type="danger">--</el-link> 小时</span>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="12" style="margin-top:10px">
                <h5 class="other-msg-title">异动</h5>
                <div class="other-container">
                  <el-row>
                    <span>晋升 <el-link :underline="false" type="primary">--</el-link> 次</span>
                  </el-row>
                  <el-row>
                    <span>调岗 <el-link :underline="false" type="warning">--</el-link> 次</span>
                  </el-row>
                  <el-row>
                    <span>降级 <el-link :underline="false" type="danger">--</el-link> 次</span>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="12" style="margin-top:10px">
                <h5 class="other-msg-title">奖惩</h5>
                <div class="other-container">
                  <el-row>
                    <span>奖励 <el-link :underline="false" type="primary">--</el-link> 次</span>
                  </el-row>
                  <el-row>
                    <span>惩罚 <el-link :underline="false" type="warning">--</el-link> 次</span>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="12" style="margin-top:10px">
                <h5 class="other-msg-title">培训</h5>
                <div class="other-container">
                  <el-row>
                    <span>参加培训 <el-link :underline="false" type="primary">--</el-link> 次</span>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{padding: `10px`}" style="margin-right:10px;height: 100%;">
            <h4 class="skill-title">任职记录</h4>
            <div class="record-list">
              <el-row justify="space-between" v-for="item in serveRecord" :key="item" style="margin-bottom:5px;">
                <span class="time">2022-10-24</span>
                <span class="record-content">确认入职</span>
                <span class="record-name">xxx</span>
              </el-row>
              <el-empty v-if="serveRecord.length < 1" description="暂无记录" :image-size="60"/>
            </div>
            <el-divider border-style="dotted" style="margin: 10px 0"/>
            <h4 class="skill-title">合同</h4>
            <el-row style="margin-top:5px;align-items:stretch">
              <div class="skill-contract">
                <el-row>
                  <span class="skill-tips">现合同</span>
                  <span>2022-10-25</span>
                </el-row>
                <el-row style="margin-top:5px">
                  <span class="skill-tips">合同期限</span>
                  <span>无期限</span>
                </el-row>
                <el-row style="margin-top:5px">
                  <span class="skill-tips">起止日期</span>
                  <span>2022-10-25 ~ 无期</span>
                </el-row>
                <el-row style="margin-top:5px">
                  <span class="skill-tips">合同公司</span>
                  <span>克拉拉科技有限公司</span>
                </el-row>
              </div>
            </el-row>
            <el-divider border-style="dotted" style="margin: 10px 0"/>
            <h4 class="skill-title">定薪调薪</h4>
            <div class="record-list">
              <el-row justify="space-between" v-for="item in salaryList" :key="item" style="margin-bottom:5px;">
                <span class="time">2022-10-24</span>
                <span class="record-content">调薪</span>
                <span class="record-name">xxx</span>
              </el-row>
              <el-empty v-if="salaryList.length < 1" description="暂无记录" :image-size="60"/>
            </div>
            <el-divider border-style="dotted" style="margin: 10px 0"/>
            <h4 class="skill-title">社保公积金方案</h4>
            <div class="record-list">
              <el-row justify="space-between" v-for="item in securityList" :key="item" style="margin-bottom:5px;">
                <span class="time">2022-10-24</span>
                <span class="record-content">社保公积金</span>
                <span class="record-name">xxx</span>
              </el-row>
              <el-empty v-if="securityList.length < 1" description="暂无记录" :image-size="60"/>
            </div>
            <el-divider border-style="dotted" style="margin: 10px 0"/>
            <h4 class="skill-title">考勤</h4>
            <div class="record-list">
              <el-row justify="space-between" v-for="item in attendanceList" :key="item" style="margin-bottom:5px;">
                <span class="time">2022-10-24</span>
                <span class="record-content">加班</span>
                <span class="record-name">xxx</span>
              </el-row>
              <el-empty v-if="attendanceList.length < 1" description="暂无记录" :image-size="60"/>
            </div>
            <el-divider border-style="dotted" style="margin: 10px 0"/>
            <h4 class="skill-title">培训记录</h4>
            <div class="record-list">
              <el-row justify="space-between" v-for="item in trainingList" :key="item" style="margin-bottom:5px;">
                <span class="time">2022/10/24 ~ 2023/10/23</span>
                <span class="record-content">培训</span>
                <span class="record-name">xxx</span>
              </el-row>
              <el-empty v-if="trainingList.length < 1" description="暂无记录" :image-size="60"/>
            </div>
            <el-divider border-style="dotted" style="margin: 10px 0"/>
            <h4 class="skill-title">奖惩记录</h4>
            <div class="record-list">
              <el-row justify="space-between" v-for="item in rewardList" :key="item" style="margin-bottom:5px;">
                <span class="time">2022-10-24</span>
                <span class="record-content">通报表扬</span>
                <span class="record-name">xxx</span>
              </el-row>
              <el-empty v-if="rewardList.length < 1" description="暂无记录" :image-size="60"/>
            </div>
            <el-divider border-style="dotted" style="margin: 10px 0"/>
            <h4 class="skill-title">应聘记录</h4>
            <div class="record-list">
              <el-row justify="space-between" v-for="item in candidateList" :key="item" style="margin-bottom:5px;">
                <span class="time">2022-10-24</span>
                <span class="record-content">应聘</span>
                <span class="record-name">xxx</span>
              </el-row>
              <el-empty v-if="candidateList.length < 1" description="暂无记录" :image-size="60"/>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{padding: `10px`}" style="height: 100%">
            <el-tabs v-model="activeName" @tab-change="tabChange">
              <el-tab-pane label="基本信息" name="1"></el-tab-pane>
              <el-tab-pane label="教育经历" name="2"></el-tab-pane>
              <el-tab-pane label="工作经历" name="3"></el-tab-pane>
              <el-tab-pane label="语言能力" name="4"></el-tab-pane>
              <el-tab-pane label="职称" name="5"></el-tab-pane>
              <el-tab-pane label="证书/证件" name="6"></el-tab-pane>
              <el-tab-pane label="培训经历" name="7"></el-tab-pane>
              <el-tab-pane label="联系人" name="8"></el-tab-pane>
              <el-tab-pane label="职位信息" name="9"></el-tab-pane>
            </el-tabs>
            <template v-if="activeName == 1">
              <el-row justify="start">
                <div class="card-edit">
                  <el-icon>
                    <ele-Edit/>
                  </el-icon>
                </div>
              </el-row>
              <el-descriptions size="small" label-align="left">
                <el-descriptions-item label="姓名">{{ staffFormData.name }}</el-descriptions-item>
                <el-descriptions-item label="英文名">{{ checkVal(staffFormData.engName) }}</el-descriptions-item>
                <el-descriptions-item label="证件类型">
                  <template v-for="item in dictMap['IdCardType']">
                    <span v-if="item.value == staffFormData.idCardType">{{ item.name }}</span>
                  </template>
                  <template v-if="!staffFormData.idCardType">-</template>
                </el-descriptions-item>
                <el-descriptions-item label="证件号码">{{ checkVal(staffFormData.idCardNo) }}</el-descriptions-item>
                <el-descriptions-item label="手机号码">{{ checkVal(staffFormData.phone) }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ checkVal(staffFormData.email) }}</el-descriptions-item>
                <el-descriptions-item label="工资卡号">{{ checkVal(staffFormData.salarySocial, 'salaryCardNo') }}</el-descriptions-item>
                <el-descriptions-item label="工资卡开户行">{{ checkVal(staffFormData.salarySocial, 'openBankName') }}</el-descriptions-item>
                <el-descriptions-item label="银行名称">{{ checkVal(staffFormData.salarySocial, 'bankName') }}</el-descriptions-item>
                <el-descriptions-item label="工资卡开户城市">{{ checkVal(staffFormData.salarySocial, 'salaryCardLocation') }}</el-descriptions-item>
                <el-descriptions-item label="个人社保账户">{{ checkVal(staffFormData.salarySocial, 'socialInsuranceAccount') }}</el-descriptions-item>
                <el-descriptions-item label="是否本地首次缴纳社保">
                  <template v-if="checkVal(staffFormData.salarySocial, 'firstLocalPaySocialInsurance') == '-'">-</template>
                  <template v-else>{{ staffFormData.salarySocial['firstLocalPaySocialInsurance'] == 1 ? '是' : '否' }}</template>
                </el-descriptions-item>
                <el-descriptions-item label="个人公积金账号">{{ checkVal(staffFormData.salarySocial, 'accumulationFundAccount') }}</el-descriptions-item>
                <el-descriptions-item label="是否本地首次缴纳公积金">
                  <template v-if="checkVal(staffFormData.salarySocial, 'firstLocalPayAccumulationFund') == '-'">-</template>
                  <template v-else>{{ staffFormData.salarySocial['firstLocalPayAccumulationFund'] == 1 ? '是' : '否' }}</template>
                </el-descriptions-item>
              </el-descriptions>
              <el-divider border-style="dotted" style="margin:14px 0"/>
              <el-descriptions size="small" label-align="left">
                <el-descriptions-item label="出生日期">{{ checkVal(staffFormData.bornDate) }}</el-descriptions-item>
                <el-descriptions-item label="生日">{{ checkVal(staffFormData.birthday) }}</el-descriptions-item>
                <el-descriptions-item label="性别">
                  <template v-for="item in dictMap['SexType']">
                    <span v-if="item.value == staffFormData.sex">{{ item.name }}</span>
                  </template>
                  <template v-if="!staffFormData.sex">-</template>
                </el-descriptions-item>
                <el-descriptions-item label="年龄">{{ checkVal(staffFormData.age) }}</el-descriptions-item>
                <el-descriptions-item label="是否已婚">{{ staffFormData.marryState ? (staffFormData.marryState == 1 ? '是' : '否') : '-' }}</el-descriptions-item>
                <el-descriptions-item label="是否已育">{{ staffFormData.bearState ? (staffFormData.bearState == 1 ? '是' : '否') : '-' }}</el-descriptions-item>
                <el-descriptions-item label="政治面貌">
                  <template v-if="!staffFormData.political">-</template>
                  <template v-for="item in dictMap['PoliticalType']">
                    <span v-if="item.value == staffFormData.political">{{ item.name }}</span>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="国家地区">{{ checkVal(staffFormData.country) }}</el-descriptions-item>
                <el-descriptions-item label="籍贯">{{ checkVal(staffFormData.nativePlace) }}</el-descriptions-item>
                <el-descriptions-item label="户籍所在地">{{ checkVal(staffFormData.censusRegister) }}</el-descriptions-item>
                <el-descriptions-item label="户口性质">
                  <template v-if="!staffFormData.censusRegisterType">-</template>
                  <template v-for="item in dictMap['CensusRegisterType']">
                    <span v-if="item.value == staffFormData.censusRegisterType">{{ item.name }}</span>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </template>
            <template v-if="activeName == 2">
              <div v-for="eduItem in eduInfoList" :key="eduItem.id">
                <el-row justify="end">
                  <div class="card-item">
                    <el-icon class="item-icon" @click="openEdu(eduItem)">
                      <ele-Edit/>
                    </el-icon>
                    <el-icon class="item-icon" style="margin-left: 10px" @click="deleteEdu(eduItem)">
                      <ele-Delete/>
                    </el-icon>
                  </div>
                </el-row>
                <el-descriptions size="small" label-align="left">
                  <el-descriptions-item label="学历">
                    <template v-for="item in staffEduLevelList">
                      <span v-if="item.value == eduItem.level">{{ item.name }}</span>
                    </template>
                    <template v-if="!eduItem.level">-</template>
                  </el-descriptions-item>
                  <el-descriptions-item label="毕业院校">{{ checkVal(eduItem['universityName']) }}</el-descriptions-item>
                  <el-descriptions-item label="毕业专业">{{ checkVal(eduItem['majorName']) }}</el-descriptions-item>
                  <el-descriptions-item label="入学时间">{{ checkVal(eduItem['enrolTime']) }}</el-descriptions-item>
                  <el-descriptions-item label="毕业时间">{{ checkVal(eduItem['graduateTime']) }}</el-descriptions-item>
                  <el-descriptions-item label="毕业证书编号">{{ checkVal(eduItem['certNo']) }}</el-descriptions-item>
                  <el-descriptions-item label="学习形式">
                    <template v-for="item in dictMap['LearnShape']">
                      <span v-if="item.value == eduItem['learnShape']">{{ item.name }}</span>
                    </template>
                    <template v-if="!eduItem['learnShape']">-</template>
                  </el-descriptions-item>
                  <el-descriptions-item label="学位类型">
                    <template v-for="item in dictMap['EducationDegree']">
                      <span v-if="item.value == eduItem['degree']">{{ item.name }}</span>
                    </template>
                    <template v-if="!eduItem['degree']">-</template>
                  </el-descriptions-item>
                  <el-descriptions-item label="学位名称">{{ checkVal(eduItem['degreeName']) }}</el-descriptions-item>
                  <el-descriptions-item label="学位证书编号">{{ checkVal(eduItem['degreeNo']) }}</el-descriptions-item>
                  <el-descriptions-item label="是否第一学历">{{ eduItem['firstLevel'] == 1 ? '是' : '否' }}</el-descriptions-item>
                  <el-descriptions-item label="是否最高学历">{{ eduItem['highestLevel'] == 1 ? '是' : '否' }}</el-descriptions-item>
                </el-descriptions>
                <el-divider/>
              </div>
              <el-row align="middle" class="add-fixed" @click="openEdu(null)">
                <el-icon color="var(--el-color-primary-dark-2)" style="margin-left: 40%">
                  <ele-Plus/>
                </el-icon>
                <span class="add-tips">新增教育经历</span>
              </el-row>
            </template>
            <template v-if="activeName == 3">
              <div v-for="workItem in workHistoryList" :key="workItem.id">
                <el-row justify="end">
                  <div class="card-item">
                    <el-icon class="item-icon" @click="openWork(workItem)">
                      <ele-Edit/>
                    </el-icon>
                    <el-icon class="item-icon" style="margin-left: 10px" @click="deleteWork(workItem)">
                      <ele-Delete/>
                    </el-icon>
                  </div>
                </el-row>
                <el-descriptions size="small" label-align="left">
                  <el-descriptions-item label="工作单位">{{ workItem.companyName }}</el-descriptions-item>
                  <el-descriptions-item label="职务">{{ checkVal(workItem.postName) }}</el-descriptions-item>
                  <el-descriptions-item label="工作开始时间">{{ checkVal(workItem.startTime) }}</el-descriptions-item>
                  <el-descriptions-item label="工作结束时间">{{ checkVal(workItem.endTime) }}</el-descriptions-item>
                  <el-descriptions-item label="离职原因">{{ checkVal(workItem.leaveReason) }}</el-descriptions-item>
                  <el-descriptions-item label="证明人">{{ checkVal(workItem.prover) }}</el-descriptions-item>
                  <el-descriptions-item label="证明人电话">{{ checkVal(workItem.proverPhone) }}</el-descriptions-item>
                  <el-descriptions-item label="工作备注">{{ checkVal(workItem.remark) }}</el-descriptions-item>
                </el-descriptions>
                <el-divider/>
              </div>

              <el-row align="middle" class="add-fixed" @click="openWork(null)">
                <el-icon color="var(--el-color-primary-dark-2)" style="margin-left: 40%">
                  <ele-Plus/>
                </el-icon>
                <span class="add-tips">新增工作经历</span>
              </el-row>
            </template>
            <template v-if="activeName == 4">
              <div v-for="languageItem in staffLanguageList" :key="languageItem.id">
                <el-row justify="end">
                  <div class="card-item">
                    <el-icon class="item-icon" @click="openLanguage(languageItem)">
                      <ele-Edit/>
                    </el-icon>
                    <el-icon class="item-icon" style="margin-left: 10px" @click="deleteLanguage(languageItem)">
                      <ele-Delete/>
                    </el-icon>
                  </div>
                </el-row>
                <el-descriptions size="small" label-align="left">
                  <el-descriptions-item label="语种">{{ checkVal(languageItem.name) }}</el-descriptions-item>
                  <el-descriptions-item label="掌握程度">{{ checkVal(languageItem.proficiency) }}</el-descriptions-item>
                  <el-descriptions-item label="备注">{{ checkVal(languageItem.remark) }}</el-descriptions-item>
                </el-descriptions>
                <el-divider/>
              </div>

              <el-row align="middle" class="add-fixed" @click="openLanguage(null)">
                <el-icon color="var(--el-color-primary-dark-2)" style="margin-left: 40%">
                  <ele-Plus/>
                </el-icon>
                <span class="add-tips">新增语言能力</span>
              </el-row>
            </template>
            <template v-if="activeName == 5">
              <div v-for="technicalTitleItem in staffTechnicalTitleList" :key="technicalTitleItem.id">
                <el-row justify="end">
                  <div class="card-item">
                    <el-icon class="item-icon" @click="openJob(technicalTitleItem)">
                      <ele-Edit/>
                    </el-icon>
                    <el-icon class="item-icon" style="margin-left: 10px" @click="deleteJob(technicalTitleItem)">
                      <ele-Delete/>
                    </el-icon>
                  </div>
                </el-row>
                <el-descriptions size="small" label-align="left">
                  <el-descriptions-item label="职称名称">{{ technicalTitleItem.name }}</el-descriptions-item>
                  <el-descriptions-item label="职称级别">{{ checkVal(technicalTitleItem.grade) }}</el-descriptions-item>
                  <el-descriptions-item label="职称获得时间">{{ checkVal(technicalTitleItem.gainTime) }}</el-descriptions-item>
                  <el-descriptions-item label="职称评定机构">{{ checkVal(technicalTitleItem.judgeOrganize) }}</el-descriptions-item>
                  <el-descriptions-item label="职称证书编号">{{ checkVal(technicalTitleItem.certNo) }}</el-descriptions-item>
                  <el-descriptions-item label="是否最高职称">{{ technicalTitleItem.highestLevel == 1 ? '是' : '否' }}</el-descriptions-item>
                  <el-descriptions-item label="职称备注">{{ checkVal(technicalTitleItem.remark) }}</el-descriptions-item>
                </el-descriptions>
                <el-divider/>
              </div>

              <el-row align="middle" class="add-fixed" @click="openJob(null)">
                <el-icon color="var(--el-color-primary-dark-2)" style="margin-left: 40%">
                  <ele-Plus/>
                </el-icon>
                <span class="add-tips">新增职称</span>
              </el-row>
            </template>
            <template v-if="activeName == 6">
              <div v-for="certItem in staffCertificateList" :key="certItem.id">
                <el-row justify="end">
                  <div class="card-item">
                    <el-icon class="item-icon" @click="openCertificate(certItem)">
                      <ele-Edit/>
                    </el-icon>
                    <el-icon class="item-icon" style="margin-left: 10px" @click="deleteCertificate(certItem)">
                      <ele-Delete/>
                    </el-icon>
                  </div>
                </el-row>
                <el-descriptions size="small" label-align="left">
                  <el-descriptions-item label="证书名称">{{ certItem.name }}</el-descriptions-item>
                  <el-descriptions-item label="证书级别">{{ checkVal(certItem.grade) }}</el-descriptions-item>
                  <el-descriptions-item label="证书/证件编号">{{ checkVal(certItem.certNo) }}</el-descriptions-item>
                  <el-descriptions-item label="有效期起始日期">{{ checkVal(certItem.validStartDate) }}</el-descriptions-item>
                  <el-descriptions-item label="有效期结束日期">{{ checkVal(certItem.validEndDate) }}</el-descriptions-item>
                  <el-descriptions-item label="发证机构">{{ checkVal(certItem.organize) }}</el-descriptions-item>
                  <el-descriptions-item label="发证日期">{{ checkVal(certItem.gainDate) }}</el-descriptions-item>
                  <el-descriptions-item label="证件备注">{{ checkVal(certItem.remark) }}</el-descriptions-item>
                </el-descriptions>
                <el-divider/>
              </div>

              <el-row align="middle" class="add-fixed" @click="openCertificate(null)">
                <el-icon color="var(--el-color-primary-dark-2)" style="margin-left: 40%"><ele-Plus /></el-icon>
                <span class="add-tips">新增证书/证件</span>
              </el-row>
            </template>
            <template v-if="activeName == 7">
              <div v-for="trainItem in staffTrainList" :key="trainItem.id">
                <el-row justify="end">
                  <div class="card-item">
                    <el-icon class="item-icon" @click="openTraining(trainItem)">
                      <ele-Edit/>
                    </el-icon>
                    <el-icon class="item-icon" style="margin-left: 10px" @click="deleteTraining(trainItem)">
                      <ele-Delete/>
                    </el-icon>
                  </div>
                </el-row>
                <el-descriptions size="small" label-align="left">
                  <el-descriptions-item label="培训课程">{{ trainItem.courseName }}</el-descriptions-item>
                  <el-descriptions-item label="培训机构名称">{{ checkVal(trainItem.organize) }}</el-descriptions-item>
                  <el-descriptions-item label="培训开始时间">{{ checkVal(trainItem.startTime) }}</el-descriptions-item>
                  <el-descriptions-item label="培训结束时间">{{ checkVal(trainItem.endTime) }}</el-descriptions-item>
                  <el-descriptions-item label="培训时长">{{ checkVal(trainItem.trainDuration) }}</el-descriptions-item>
                  <el-descriptions-item label="培训成绩">{{ checkVal(trainItem.score) }}</el-descriptions-item>
                  <el-descriptions-item label="培训证书名称">{{ checkVal(trainItem.certName) }}</el-descriptions-item>
                  <el-descriptions-item label="培训备注">{{ checkVal(trainItem.remark) }}</el-descriptions-item>
                </el-descriptions>
                <el-divider/>
              </div>

              <el-row align="middle" class="add-fixed" @click="openTraining(null)">
                <el-icon color="var(--el-color-primary-dark-2)" style="margin-left: 40%">
                  <ele-Plus/>
                </el-icon>
                <span class="add-tips">新增培训经历</span>
              </el-row>
            </template>
            <template v-if="activeName == 8">
              <div v-for="contactItem in staffContactList" :key="contactItem.id">
                <el-row justify="end">
                  <div class="card-item">
                    <el-icon class="item-icon" @click="openContact(contactItem)">
                      <ele-Edit/>
                    </el-icon>
                    <el-icon class="item-icon" @click="deleteContact(contactItem)">
                      <ele-Delete/>
                    </el-icon>
                  </div>
                </el-row>
                <el-descriptions size="small" label-align="left">
                  <el-descriptions-item label="联系人姓名">{{ contactItem.name }}</el-descriptions-item>
                  <el-descriptions-item label="关系">{{ checkVal(contactItem.relation) }}</el-descriptions-item>
                  <el-descriptions-item label="联系人电话">{{ checkVal(contactItem.phone) }}</el-descriptions-item>
                  <el-descriptions-item label="联系人工作单位">{{ checkVal(contactItem.workUnit) }}</el-descriptions-item>
                  <el-descriptions-item label="联系人职务">{{ checkVal(contactItem.post) }}</el-descriptions-item>
                  <el-descriptions-item label="联系人地址">{{ checkVal(contactItem.address) }}</el-descriptions-item>
                </el-descriptions>
                <el-divider/>
              </div>

              <el-row align="middle" class="add-fixed" @click="openContact(null)">
                <el-icon color="var(--el-color-primary-dark-2)" style="margin-left: 40%">
                  <ele-Plus/>
                </el-icon>
                <span class="add-tips">新增联系人</span>
              </el-row>
            </template>
            <template v-if="activeName == 9">
              <el-row justify="end">
                <div class="card-edit" @click="openPost">
                  <el-icon>
                    <ele-Edit/>
                  </el-icon>
                </div>
              </el-row>
              <el-descriptions size="small" label-align="left">
                <el-descriptions-item label="入职日期">{{ checkVal(staffFormData.joinedDate) }}</el-descriptions-item>
                <el-descriptions-item label="试用期">
                  <template v-for="item in dictMap['StaffTrialLimit']" :key="item.value">
                    <span class="row-data" v-if="item.value == staffFormData.trialDay">{{ item.name }}</span>
                  </template>
                  <template v-if="!staffFormData.trialDay">-</template>
                </el-descriptions-item>
                <el-descriptions-item label="转正日期">{{ checkVal(staffFormData.officialDate) }}</el-descriptions-item>
                <el-descriptions-item label="司龄">{{ checkVal(staffFormData.joinedAge) }}</el-descriptions-item>
                <el-descriptions-item label="合同公司">{{ checkVal(staffFormData.staffContract, 'companyName') }}</el-descriptions-item>
                <el-descriptions-item label="工号">{{ checkVal(staffFormData.workNo) }}</el-descriptions-item>
                <el-descriptions-item label="部门">{{ checkVal(checkVal(staffFormData.dept).name) }}</el-descriptions-item>
                <el-descriptions-item label="直属上级">{{ checkVal(staffFormData.directSuperiorName) }}</el-descriptions-item>
                <el-descriptions-item label="职位">{{ checkVal(staffFormData.officePosition, 'name') }}</el-descriptions-item>
                <el-descriptions-item label="兼任">{{ checkVal(staffFormData.deputyOfficePosition, 'name') }}</el-descriptions-item>
                <el-descriptions-item label="职务">{{ checkVal(staffFormData.officePost, 'name') }}</el-descriptions-item>
                <el-descriptions-item label="工作性质">
                  <template v-for="item in staffTypes">
                    <span v-show="item.value == staffFormData.type">{{ item.name }}</span>
                  </template>
                  <template v-if="!staffFormData.type">-</template>
                </el-descriptions-item>
                <el-descriptions-item label="员工状态">
                  <template v-for="item in staffStates">
                    <span v-show="item.value == staffFormData.state">{{ item.name }}</span>
                  </template>
                  <template v-if="!staffFormData.state">-</template>
                </el-descriptions-item>
                <el-descriptions-item label="招聘渠道">
                  <template v-for="item in dictMap['RecruitChannel']">
                    <span v-show="item.value == staffFormData.recruitChannel">{{ item.name }}</span>
                  </template>
                  <template v-if="!staffFormData.recruitChannel">-</template>
                </el-descriptions-item>
                <el-descriptions-item label="工作城市">{{ checkVal(staffFormData.workLocation) }}</el-descriptions-item>
                <el-descriptions-item label="入职地点">{{ checkVal(staffFormData.joinedAddress) }}</el-descriptions-item>
                <el-descriptions-item label="工作地点">{{ checkVal(staffFormData.workAddress) }}</el-descriptions-item>
                <el-descriptions-item label="合同期限">{{ checkVal(staffFormData.staffContract, 'term') }}</el-descriptions-item>
              </el-descriptions>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="tabs-list">
      <div class="close-btn" @click="close">
        <el-icon color="var(--next-color-white)" size="28px">
          <ele-CircleClose/>
        </el-icon>
      </div>
    </div>
    <edu-detail v-model:dialogDrawer="dialogEdu" v-model:dictMap="dictMap" v-model:staffEdu="staffEdu" v-model:eduLevelList="staffEduLevelList"></edu-detail>
    <work-detail v-model:dialogDrawer="dialogWork" v-model:workHistory="workHistory"></work-detail>
    <language-detail v-model:dialogDrawer="dialogLanguage" v-model:staffLanguage="staffLanguage"></language-detail>
    <job-title-detail v-model:dialogDrawer="dialogJobTitle" v-model:technicalTitle="staffTechnicalTitle"></job-title-detail>
    <certificate-detail v-model:dialogDrawer="dialogCertificate" v-model:staffCertificate="staffCertificate"></certificate-detail>
    <training-detail v-model:dialogDrawer="dialogTraining" v-model:staffTrain="staffTrain"></training-detail>
    <contact-detail v-model:dialogDrawer="dialogContact" v-model:staffContact="staffContact"></contact-detail>
    <post-detail v-model:dialogDrawer="dialogPost" v-model:staffData="staffFormData" v-model:dictMap="dictMap" v-model:stateList="staffStates" v-model:typeList="staffTypes" v-model:deptTree="deptTrees" v-model:postList="postList" v-model:staffList="staffList" />
  </el-drawer>
</template>

<script>
import {toRefs, watch, computed, reactive, onMounted} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import {getStaffEduList, removeEdu} from '/@/api/oa/staff/edu'
import {getWorkHistoryList, removeWorkHistory} from '/@/api/oa/staff/workHistory'
import {getStaffLanguageList, removeLanguage} from '/@/api/oa/staff/language'
import {getStaffTechnicalTitles, removeTechnicalTitle} from '/@/api/oa/staff/technicalTitle'
import {getStaffCertificates, removeCertificate} from '/@/api/oa/staff/certificate'
import {getStaffTrainList, removeTrain} from '/@/api/oa/staff/train'
import {getStaffContactList, removeContact} from '/@/api/oa/staff/contact'
import EduDetail from './EduDetail.vue'
import WorkDetail from './WorkDetail.vue'
import LanguageDetail from './LanguageDetail.vue'
import JobTitleDetail from './JobTitleDetail.vue'
import CertificateDetail from './CertificateDetail.vue'
import TrainingDetail from './TrainingDetail.vue'
import ContactDetail from './ContactDetail.vue'
import PostDetail from './PostDetail.vue'

export default {
  name: 'StaffDetail',
  props: {
    dialogDrawer: {
      type: Boolean,
      default: false
    },
    staffData: {
      type: Object,
      default: {
        id: null,
        enterpriseId: null,
        dept: {},
        officePosition: {},
        deputyOfficePosition: {},
        officePost: {},
        staffContract: {},
        salarySocial: {},
        staffEdu: {},
        staffLeave: {}
      }
    },
    staffTypes: {
      type: Array,
      default: []
    },
    staffStates: {
      type: Array,
      default: []
    },
    staffEduLevelList: {
      type: Array,
      default: []
    },
    dictMap: {
      type: Object,
      default: {}
    },
    deptTrees: {
      type: Array,
      default: []
    },
    postList: {
      type: Array,
      default: []
    },
    staffList: {
      type: Array,
      default: []
    }
  },
  components: {
    EduDetail,
    WorkDetail,
    LanguageDetail,
    JobTitleDetail,
    CertificateDetail,
    TrainingDetail,
    ContactDetail,
    PostDetail
  },
  setup(props, context) {
    const {dialogDrawer} = toRefs(props)
    const {staffData} = toRefs(props)
    const drawer = computed({
      get: () => dialogDrawer.value,
      set: val => {
        context.emit('update:dialogDrawer', val)
      }
    })
    const formData = computed({
      get: () => staffData.value,
      set: val => {
        context.emit('update:staffData', val)
      }
    })
    const state = reactive({
      size: '',
      activeName: '1',
      staffFormData: formData,  // 员工数据
      eduInfoList: [],    // 学历信息列表
      staffEdu: {},       // 编辑/添加员工教育经历的对象
      workHistoryList: [],  // 工作经历列表
      workHistory: {},
      staffLanguageList: [],  // 语言能力列表
      staffLanguage: {},
      staffTechnicalTitleList: [],  // 职称列表
      staffTechnicalTitle: {},
      staffCertificateList: [],   // 证书列表
      staffCertificate: {},
      staffTrainList: [],   // 培训经历列表
      staffTrain: {},
      staffContactList: [],   // 联系人列表
      staffContact: {},
      serveRecord: [],
      salaryList: [],
      securityList: [],
      attendanceList: [],
      trainingList: [],
      rewardList: [],
      candidateList: [],
      dialogEdu: false,
      dialogWork: false,
      dialogLanguage: false,
      dialogJobTitle: false,
      dialogCertificate: false,
      dialogTraining: false,
      dialogContact: false,
      dialogPost: false
    })
    watch(() => state.dialogEdu, val => {
      // 关闭学历信息编辑/添加时刷新一次数据
      if (!val) {
        getStaffEduData()
      }
    })
    watch(() => state.dialogWork, val => {
      // 关闭工作经历编辑/添加时刷新一次数据
      if (!val) {
        getStaffWorkHistoryList()
      }
    })
    watch(() => state.dialogLanguage, val => {
      // 关闭语言能力编辑/添加时刷新一次数据
      if (!val) {
        getStaffLanguageData()
      }
    })
    watch(() => state.dialogJobTitle, val => {
      // 关闭职称编辑/添加时刷新一次数据
      if (!val) {
        getStaffTechnicalTitleList()
      }
    })
    watch(() => state.dialogCertificate, val => {
      // 关闭证书编辑/添加时刷新一次数据
      if (!val) {
        getStaffCertificateList()
      }
    })
    watch(() => state.dialogTraining, val => {
      // 关闭培训经历编辑/添加时刷新一次数据
      if (!val) {
        getStaffTrains()
      }
    })
    watch(() => state.dialogContact, val => {
      // 关闭联系人编辑/添加时刷新一次数据
      if (!val) {
        getStaffContacts()
      }
    })
    const getSize = () => {
      if (document.body.clientWidth <= 1400) {
        return '1220px'
      } else {
        return '85%'
      }
    }
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }
    const tabChange = (tabName) => {
      switch (tabName) {
        case '2': {
          getStaffEduData()
          break
        }
        case '3': {
          getStaffWorkHistoryList()
          break
        }
        case '4': {
          getStaffLanguageData()
          break
        }
        case '5': {
          getStaffTechnicalTitleList()
          break
        }
        case '6': {
          getStaffCertificateList()
          break
        }
        case '7': {
          getStaffTrains()
          break
        }
        case '8': {
          getStaffContacts()
          break
        }
      }
    }
    const getStaffEduData = async () => {
      try {
        const res = await getStaffEduList({staffId: state.staffFormData.id})
        state.eduInfoList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const getStaffWorkHistoryList = async () => {
      try {
        const res = await getWorkHistoryList({staffId: state.staffFormData.id})
        state.workHistoryList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const getStaffLanguageData = async () => {
      try {
        const res = await getStaffLanguageList({staffId: state.staffFormData.id})
        state.staffLanguageList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const getStaffTechnicalTitleList = async () => {
      try {
        const res = await getStaffTechnicalTitles({staffId: state.staffFormData.id})
        state.staffTechnicalTitleList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const getStaffCertificateList = async () => {
      try {
        const res = await getStaffCertificates({staffId: state.staffFormData.id})
        state.staffCertificateList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const getStaffTrains = async () => {
      try {
        const res = await getStaffTrainList({staffId: state.staffFormData.id})
        state.staffTrainList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const getStaffContacts = async () => {
      try {
        const res = await getStaffContactList({staffId: state.staffFormData.id})
        state.staffContactList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const openEdu = (staffEdu) => {
      state.staffEdu = staffEdu ? Object.assign({}, staffEdu) : {staffId: state.staffFormData.id}
      state.dialogEdu = true
    }
    const deleteEdu = (staffEdu) => {
      ElMessageBox.confirm('确定删除 ' + staffEdu.universityName + ' 的教育经历？',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(async () => {
        try {
          await removeEdu(staffEdu)
          ElMessage.success('删除成功！')
          await getStaffEduData()
        } catch (e) {
          console.log(e)
        }
      }).catch(() => {
      })
    }
    const openWork = (workHistory) => {
      state.workHistory = workHistory ? Object.assign({}, workHistory) : {staffId: state.staffFormData.id}
      state.dialogWork = true
    }
    const deleteWork = (workHistory) => {
      ElMessageBox.confirm('确定删除 ' + workHistory.companyName + ' 的工作经历？',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(async () => {
        try {
          await removeWorkHistory(workHistory)
          ElMessage.success('删除成功！')
          await getStaffWorkHistoryList()
        } catch (e) {
          console.log(e)
        }
      }).catch(() => {
      })
    }
    const openLanguage = (staffLanguage) => {
      state.staffLanguage = staffLanguage ? Object.assign({}, staffLanguage) : {staffId: state.staffFormData.id}
      state.dialogLanguage = true
    }
    const deleteLanguage = (staffLanguage) => {
      ElMessageBox.confirm('确定删除 ' + staffLanguage.name + ' 的语言能力？',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(async () => {
        try {
          await removeLanguage(staffLanguage)
          ElMessage.success('删除成功！')
          await getStaffLanguageData()
        } catch (e) {
          console.log(e)
        }
      }).catch(() => {
      })
    }
    const openJob = (technicalTitle) => {
      state.staffTechnicalTitle = technicalTitle ? Object.assign({}, technicalTitle) : {staffId: state.staffFormData.id}
      state.dialogJobTitle = true
    }
    const deleteJob = (technicalTitle) => {
      ElMessageBox.confirm('确定删除 ' + technicalTitle.name + ' 的职称？',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(async () => {
        try {
          await removeTechnicalTitle(technicalTitle)
          ElMessage.success('删除成功！')
          await getStaffTechnicalTitleList()
        } catch (e) {
          console.log(e)
        }
      }).catch(() => {
      })
    }
    const openCertificate = (staffCertificate) => {
      state.staffCertificate = staffCertificate ? Object.assign({}, staffCertificate) : {staffId: state.staffFormData.id}
      state.dialogCertificate = true
    }
    const deleteCertificate = (staffCertificate) => {
      ElMessageBox.confirm('确定删除 ' + staffCertificate.name + ' 的证书？',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(async () => {
        try {
          await removeCertificate(staffCertificate)
          ElMessage.success('删除成功！')
          await getStaffCertificateList()
        } catch (e) {
          console.log(e)
        }
      }).catch(() => {
      })
    }
    const openTraining = (staffTrain) => {
      state.staffTrain = staffTrain ? Object.assign({}, staffTrain) : {staffId: state.staffFormData.id}
      state.dialogTraining = true
    }
    const deleteTraining = (staffTrain) => {
      ElMessageBox.confirm('确定删除 ' + staffTrain.courseName + ' 的培训经历？',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(async () => {
        try {
          await removeTrain(staffTrain)
          ElMessage.success('删除成功！')
          await getStaffTrains()
        } catch (e) {
          console.log(e)
        }
      }).catch(() => {
      })
    }
    const openContact = (staffContact) => {
      state.staffContact = staffContact ? Object.assign({}, staffContact) : {staffId: state.staffFormData.id}
      state.dialogContact = true
    }
    const deleteContact = (staffContact) => {
      ElMessageBox.confirm('确定删除联系人 ' + staffContact.name + ' ？',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(async () => {
        try {
          await removeContact(staffContact)
          ElMessage.success('删除成功！')
          await getStaffContacts()
        } catch (e) {
          console.log(e)
        }
      }).catch(() => {
      })
    }
    const openPost = () => {
      state.dialogPost = true
    }
    const checkVal = (val, subVal) => {
      if (subVal) {
        return val ? (val[subVal] ? val[subVal] : '-') : '-'
      } else {
        return val ? val : '-'
      }
    }
    onMounted(() => {
      state.size = getSize()
      window.onresize = () => {
        state.size = getSize()
      }
    })
    return {
      drawer,
      formData,
      close,
      tabChange,
      openEdu,
      deleteEdu,
      getStaffEduData,
      getStaffWorkHistoryList,
      getStaffLanguageData,
      getStaffTechnicalTitleList,
      getStaffCertificateList,
      getStaffTrains,
      getStaffContacts,
      openWork,
      deleteWork,
      openLanguage,
      deleteLanguage,
      openJob,
      deleteJob,
      openCertificate,
      deleteCertificate,
      openTraining,
      deleteTraining,
      openContact,
      deleteContact,
      openPost,
      checkVal,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped lang="scss">
.staff-detail {
  padding: 10px;
  background: var(--next-bg-main-color);
  min-height: 100%;

  .staff-header {
    position: relative;

    .row-item {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .staff-name {
        margin-right: 5px;
        font-weight: bold;
        font-size: 15px;
      }

      .row-cell {
        margin-top: 2px;
        display: flex;
        align-items: center;

        &:first-child {
          margin-top: 0;
        }

        .fa {
          font-size: 13px;
        }

        .pink {
          color: #f09199;
          font-weight: bold;
        }

        .blue {
          color: #0094c8;
          font-weight: bold;
        }
      }

      .row-other {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: var(--el-text-color-primary);
      }
    }

    .staff-header-cell {
      padding-left: 10px;
      font-size: 13px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 5px;
        left: -5px;
        bottom: 5px;
        border-left: 1px dotted var(--el-border-color);
      }

      .row-header-cell {
        width: 50%;
        margin-top: 5px;
        display: flex;
        align-items: center;

        .row-tips {
          margin-right: 10px;
          display: inline-block;
          color: var(--el-color-info);
        }

        .row-data {
          flex: 1;
          overflow: hidden;
        }
      }
    }

    .staff-edit {
      position: absolute;
      left: 5px;
      top: -5px;
      font-size: 18px;
      color: var(--next-color-text-gery);
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .card-edit {
    color: var(--next-color-text-gery);
    cursor: pointer;
    position: absolute;
    top: -8px;
    right: 0;

    &:hover {
      color: var(--el-color-primary);
    }
  }

  .card-item {
    color: var(--next-color-text-gery);
    cursor: pointer;
    position: absolute;
    top: -8px;
    right: 0;

    .item-icon {
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .add-fixed {
    padding-left: 20px;
    color: var(--el-color-primary);
    cursor: pointer;
    //border-bottom: 1px dotted var(--el-border-color-light);
    padding-bottom: 10px;
    margin-bottom: 10px;

    .add-tips {
      margin-left: 5px;
      font-size: 13px;
    }
  }

  .staff-content {
    align-items: stretch;

    .skill-title {
      color: var(--el-text-color-primary);
      font-size: 14px;
    }

    .action-cell {
      margin-top: 10px;
      margin-left: 10px;

      .action-tips {
        font-size: 13px;
      }
    }

    .other-msg-title {
      font-size: 13px;
      position: relative;
      padding-left: 8px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 2px;
        border-radius: 10px;
        background: var(--el-color-primary);
      }
    }

    .other-container {
      margin-top: 5px;
      margin-left: 8px;
      font-size: 12px;
    }

    .record-list {
      margin-top: 10px;
      font-size: 13px;

      .time {
        color: var(--el-text-color-secondary);
      }

      .record-content {
        flex: 1;
        text-align: center;
        overflow: hidden;
      }
    }

    .skill-contract {
      font-size: 13px;

      .contract-status {
        margin-bottom: 8px;
        color: var(--el-color-info);
      }

      .skill-tips {
        margin-right: 10px;
        min-width: 55px;
        color: var(--el-color-info);
      }
    }

    .skill-contract-content {
      width: 30%;
    }
  }
}

.tabs-list {
  position: absolute;
  top: 90px;
  left: -50px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: auto;
  max-height: 100%;

  .close-btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--el-color-primary);
    padding: 5px 0;
    border-radius: 5px 0 0 5px;
  }
}

:deep(.el-empty) {
  --el-empty-padding: 0 0;

  .el-empty__description {
    margin-top: 5px;

    p {
      font-size: 12px;
    }
  }
}

:deep(.el-collapse) {
  border-top: none;

  .el-collapse-item__header {
    height: 30px;
    line-height: 30px;
  }
}
</style>
<style>
.staff-detail-drawer {
  position: fixed;
  overflow: unset;
}

.staff-modal {
  left: unset;
}
</style>
